<!doctype html>
<html class="no-js fixed-layout">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>投票</title>
  <meta name="description" content="这是一个 index 页面">
  <meta name="keywords" content="index">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <link rel="icon" type="image/png" href="../assets/i/favicon.png">
  <link rel="apple-touch-icon-precomposed" href="../assets/i/app-icon72x72@2x.png">
  <meta name="apple-mobile-web-app-title" content="Amaze UI" />
  <link rel="stylesheet" href="../assets/css/amazeui.min.css"/>
  <link rel="stylesheet" href="../assets/css/admin.css">
	<script type="text/javascript"   src="../js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript"  src="../js/cookie_util.js"></script>
	<!-- chart -->
  <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
  <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts-3d.js"></script>

  <script type="text/javascript">
  			var isVoteBtn = false;
			function vote_btn(e){
				isVoteBtn = true;
				var ip_get = getCookie("ip");
				if(ip_get != null){
					alert("您已投票");
				}else if(ip_get == null){
					jQuery(function($) {
						var ip = 11111;
							var url = 'http://chaxun.1616.net/s.php?type=ip&output=json&callback=?&_='
									+ Math.random();
							$.getJSON(url, function(data) {
								ip = data.Ip;
								//alert(ip);
							});
							addCookie("ip",ip,2);
						});
						var id = $(e).parent().parent().parent().parent().data("id");
						var vote_id = $(e).parent().parent().parent().parent().data("vote_id");
						//var vote_count = $(e).parent().parent().parent().parent().children("td").eq(1).html();
						//$(e).parent().parent().parent().parent().children("td").eq(1).html(Number(vote_count)+1);
						addCookie("vote_activity_id",id,2);
						$.ajax({
							url : "http://localhost:8080/ciic-vote/customer/vote.do",
							type : "post",
							data:{"id":vote_id},
							dataType : "json",
							success : function(result) {
								if(result.status = 0){
									
								}
							}
						});
						load_activity();
				}
				
			}
  
			
			$(function() {
				$.ajax({
							url : "http://localhost:8080/ciic-vote/activity/findAll.do",
							type : "post",
							dataType : "json",
							success : function(result) {
								var list = result.data;
								for ( var i = 0; i < list.length; i++) {
									var id = list[i].id;
									var title = list[i].title;
									var create_at = list[i].create_at;
									var begin_at = list[i].begin_at;
									var end_at = list[i].end_at;
									var state = list[i].state;
									var creator = list[i].creator;
									var li = '<li><a href="javascript:void(0)" ><span class="am-icon-puzzle-piece"></span>';
									li += title;
									li += '</a></li>';
									var $li = $(li);
									$li.data("id", id);
									$(".activity-list").append($li);
								}
							}
						});
				//点击活动名称，显示投票信息
				$(".activity-list").on("click", "li", load_activity);

			});
			
			function load_activity() {
				var id;
				if(isVoteBtn){
					id = getCookie("vote_activity_id");
				}
				if(!isVoteBtn){
					id  = $(this).data("id");
				}
				$.ajax({
							url : "http://localhost:8080/ciic-vote/activity/findByActivityId.do",
							type : "post",
							async:false, 
							data : {
								"activityId" : id
							},
							dataType : "json",
							success : function(result) {
								var aav = result.data;
								var activity = aav.activity;
								var activity_title = activity.title;
								var votes = aav.votes;
								$(".votes_ul").children("li").remove();
								$(".votes_title").children("li").remove();
								$("#voteitem_list").children().remove();
								$(".vote_area_title").children().remove();
								var li_title = '<li></li>';
								var $li_title =$(li_title);
								$li_title.data("activity_title",activity_title);
								$(".votes_title").append($li_title);
								var vote_area_li = '<div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">投票区</strong>  <small></small></div>';
								$(".vote_area_title").append(vote_area_li);
								for( var i = 0; i < votes.length; i++) {
									var vote_title = votes[i].title;
									var vote_count = votes[i].count;
									var vote_id = votes[i].id;
									var id = votes[i].activity_id;
									var li = '<li></li>';
									var $li =$(li);
									$li.data("title",vote_title);
									$li.data("count",vote_count);
									$(".votes_ul").append($li);
									
		        					var item_li = '<tr><td>';
		        					item_li += vote_title;
		        					item_li += '</td><td>';
		        					item_li += vote_count;
		        					item_li += '</td><td>';
		        					item_li +=  '<div class="am-btn-toolbar">';
		        					item_li +=    '<div class="am-btn-group am-btn-group-xs">';
		        					item_li +=      '<button class="am-btn am-btn-default am-btn-xs am-text-secondary" onclick="vote_btn(this)"><span class="am-icon-pencil-square-o"></span> 投票</button>';
		        					item_li +=    '</div>';
		        					item_li +=  '</div>';
		        					item_li += '</td>';
		        					item_li += '</tr>';
		        					var $item_li = $(item_li);
		        					$item_li.data("vote_id",vote_id);
		        					$item_li.data("id",id);
		    						$("#voteitem_list").append($item_li);
								}
							}
				});
				
				var votes_li = $(".votes_ul li");
				var votes_count_list = [];
				var votes_item_list = [];
				var activity_str = null;
				
				for(var i=0;i<votes_li.length;i++){
					votes_count_list.push(votes_li.eq(i).data("count"));
					votes_item_list.push(votes_li.eq(i).data("title"));
				}
				activity_str = $(".votes_title li").eq(0).data("activity_title");
				
				var chart = new Highcharts.Chart({
					chart : {
						renderTo : 'container',
						type : 'column',
						margin : 75,
						options3d : {
							enabled : true,
							alpha : 15,
							beta : 15,
							depth : 50,
							viewDistance : 25
						}
					},
					title : {
						text : activity_str
					},
					xAxis : {
						categories : votes_item_list
					},
					plotOptions : {
						column : {
							depth : 25
						}
					},
					series : [ {
						name : '投票',
						data : votes_count_list
					} ]
				});

				// Activate the sliders
				$('#R0').on('change', function() {
					chart.options.chart.options3d.alpha = this.value;
					showValues();
					chart.redraw(false);
				});
				$('#R1').on('change', function() {
					chart.options.chart.options3d.beta = this.value;
					showValues();
					chart.redraw(false);
				});

				function showValues() {
					$('#R0-value').html(chart.options.chart.options3d.alpha);
					$('#R1-value').html(chart.options.chart.options3d.beta);
				}
				showValues();
				
				
				
				
				/*var chart2 = new Highcharts.Chart({    
				        chart: {
				        	renderTo : 'container2',
				            type: 'pie',
				            options3d: {
				                enabled: true,
				                alpha: 45,
				                beta: 0
				            }
				        },
				        title: {
				            text: 'Browser market shares at a specific website, 2014'
				        },
				        tooltip: {
				            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
				        },
				        plotOptions: {
				            pie: {
				                allowPointSelect: true,
				                cursor: 'pointer',
				                depth: 35,
				                dataLabels: {
				                    enabled: true,
				                    format: '{point.name}'
				                }
				            }
				        },
				        series: [{
				            type: 'pie',
				            name: 'Browser share',
				            data: [
				                ['Firefox',   45.0],
				                ['IE',       26.8],
				                {
				                    name: 'Chrome',
				                    y: 12.8,
				                    sliced: true,
				                    selected: true
				                },
				                ['Safari',    8.5],
				                ['Opera',     6.2],
				                ['Others',   0.7]
				            ]
				        }]
				});  */
				isVoteBtn = false;			
			}
		</script>
	  <style type="text/css">
	  	#container {
	  		float:left;
	  	}
	  	.hidden {
	  		display:none;
	  	}
	  	.inline-block {
	  		display:inline-block;
	  	}
	  </style>
</head>
<body>

<header class="am-topbar am-topbar-inverse admin-header">
  <div class="am-topbar-brand">
    <strong>投票系统</strong> <small>客户端页面</small>
  </div>

  <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only" data-am-collapse="{target: '#topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button>

  <div class="am-collapse am-topbar-collapse" id="topbar-collapse">

    <ul class="am-nav am-nav-pills am-topbar-nav am-topbar-right admin-header-list">
      <li class="am-hide-sm-only"><a href="javascript:;" id="admin-fullscreen"><span class="am-icon-arrows-alt"></span> <span class="admin-fullText">开启全屏</span></a></li>
    </ul>
  </div>
</header>

<div class="am-cf admin-main">
  <!-- sidebar start -->
  <div class="admin-sidebar am-offcanvas" id="admin-offcanvas">
    <div class="am-offcanvas-bar admin-offcanvas-bar">
      <ul class="votes_title hidden"></ul>
      <ul class="votes_ul hidden"></ul>
      <ul class="am-list admin-sidebar-list">
        <li><a href="customer.html"><span class="am-icon-home"></span> 首页</a></li>
        <li class="admin-parent">
          <a class="am-cf" data-am-collapse="{target: '#collapse-nav'}"><span class="am-icon-file"></span> 投票活动 <span class="am-icon-angle-right am-fr am-margin-right"></span></a>
          <ul class="am-list am-collapse admin-sidebar-sub am-in activity-list" id="collapse-nav">
          </ul>
        </li>
      </ul>

      <div class="am-panel am-panel-default admin-sidebar-panel">
        <div class="am-panel-bd">
          <p><span class="am-icon-bookmark"></span> 公告</p>
          <p></p>
        </div>
      </div>

      <div class="am-panel am-panel-default admin-sidebar-panel">
        <div class="am-panel-bd">
          <p><span class="am-icon-tag"></span> vote</p>
          <p>Welcome to the ciic_vote!</p>
        </div>
      </div>
    </div>
  </div>
  <!-- sidebar end -->
	<div id="container" style="width:500px;height:300px" class="inline-block"></div>
	 <!--<div id="container2" style="min-width:700px;height:400px"></div>-->
  <!-- content start -->
  <div class="admin-content">
    <div class="admin-content-body">
      <div class="am-cf am-padding vote_area_title">
        
      </div>
      
      <div class="am-g">
        <div class="am-u-sm-12">
          <table class="am-table am-table-bd am-table-striped admin-content-table">
            <thead>
            </thead>
            <tbody id="voteitem_list">
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <footer class="admin-content-footer">
      <hr>
      <p class="am-padding-left"></p>
    </footer>
  </div>
  <!-- content end -->
﻿	
</div>
  
<a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}"></a>

<script src="../assets/js/jquery.min.js"></script>
<!--<![endif]-->
<script src="../assets/js/amazeui.min.js"></script>
<script src="../assets/js/app.js"></script>
</body>
</html>
